<template>
	<view class="pages">
		<view class="form padding">
			<view class="form-line">
				<view class="form-line-text">
					申请人：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入申请人" v-model="nickName" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					申请部门：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入申请部门" v-model="deptName" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					开始地点：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入开始地点" v-model="startLocation" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					中转地：
				</view>
				<view class="tag margin-right-xs" v-for="(item, index) in transfer" :key="index">
					<view class="text margin-right-xs">
						{{ item }}
					</view>
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-text">
					结束地点：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入结束地点" v-model="endLocation" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					时间：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入结束地点" v-model="datetimerange" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					占座数：
				</view>
				<input class="uni-input font-12 disableColor" type="number" placeholder="请输入占座数" v-model="occupaSeatNum" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					是否有货物：
				</view>
				<input class="uni-input font-12 disableColor" type="text" v-model="isGoodsName" disabled />
			</view>
		</view>
		<view class="form padding-left-sm padding-right-sm margin-top-sm">
			<view class="form-line">
				<view class="form-line-text">
					审批状态：
				</view>
				<view class="form-line-text text-grey3">
					<uni-tag :text="taskStatusDes" size="small" :type="statusType[taskStatus]"></uni-tag>
				</view>
			</view>
			<view class="form-line" v-if="car.id">
				<view class="form-line-text">
					车辆：
				</view>
				<view class="form-line-text text-grey3">
					{{ car.name }}
				</view>
			</view>
			<view class="form-line" v-if="driver.id">
				<view class="form-line-text">
					司机：
				</view>
				<view class="form-line-text text-grey3">
					<text>{{ driver.name }}</text>
					<text class="margin-left-sm text-blue1" @click="makePhoneCall(driver.phone)">{{ driver.phone }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { makePhoneCall } from '@/utils/common'
	import { applyCarInfo } from '@/api/system/stroke'
	import storage from '@/utils/storage'
	export default{
		data(){
			return {
				nickName: '',
				deptName: '',
				current: 0,
				items: [
					{value: '0', name: '没有'},
					{value: '1', name: '有'},
				],
				datetimerange: '',
				startLocation: '',
				endLocation: '',
				occupaSeatNum: 0,
				transfer: [] ,// 中转地
				isGoodsName: '',
				taskStatus: 0,
				taskStatusDes: '',
				car: {id: 0,name: ''},
				driver: {id: 0,name: '', phone: ''},
				statusType: {0: 'warning', 1: 'success', 2: 'error'}
			}
		},
		onLoad(options) {
			this.nickName = storage.get('vuex_user').nickName;
			this.deptName = storage.get('vuex_user').dept.deptName;
			
			if(options.id){
				this.id = options.id;
				this.getData();
			}
		},
		methods: {
			/**
			 * 获取约车详情
			 */
			getData(){
				this.$modal.loading("请求中");
				applyCarInfo(this.id).then(res => {
					this.$modal.closeLoading();
					
					this.startLocation = res.data.startLocation;
					this.endLocation = res.data.endLocation;
					this.datetimerange = [res.data.startTime, res.data.endTime].join(' - ');
					this.isGoodsName = res.data.isGoods == 0 ? '没有' : '有';
					
					if(res.data.transitPlace){
						this.transfer = res.data.transitPlace;
					}
					
					this.taskStatus = res.data.taskStatus;
					this.taskStatusDes = res.data.taskStatusDes;
					this.occupaSeatNum = res.data.occupaSeatNum;
					
					console.log('状态' , this.taskStatusDes);
					
					this.car = {
						id: res.data.carId,
						name: res.data.carName,
					} 
					
					this.driver = {
						id: res.data.driverId,
						name: res.data.driverName,
						phone: res.data.driverPhone,
					}
					
					console.log('转种地' , this.transfer);
				}).catch(err => {
					console.log('获取详情失败' , err);
				});
			},
			/**
			 * 拨打电话
			 * @param {Object} phone
			 */
			makePhoneCall(phone){
				makePhoneCall(phone);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}
	
	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}
	
	.form {
		background-color: #FFFFFF;
	
		.form-line {
			@extend .flexCenter;
			padding: 20upx 0upx;
			border-bottom: 1px solid #E2E2E2;
			
			.tag{
				@extend .flexCenter;
				
				height: 30px;
				line-height: 30px;
				padding: 0px 10px;
				background-color: #e8f4ff;
				border: 1px solid #d1e9ff;
				color: #1890ff;
				border-radius: 4px;
			}
			
			.uni-input{
				flex: 1;
			}
			
			&:last-child{
				border: none
			}
		}
		
		.title{
			@extend .flexCenterBetween;
			border-bottom: 1px solid #E2E2E2;
		}
	}
	
	.radios{
		@extend .flexCenter;
	}
	
	
	::v-deep .uni-label-pointer{
		@extend .flexCenter;
	}
	
	::v-deep .uni-date-x .icon-calendar{
		display: none;
	}
	
	::v-deep .uni-date__x-input{
		padding-left: 0px;
	}
</style>